// jsx --- 给组件提供视图模板
// 浏览器不能识别jsx  使用babel进行翻译成React.createElement的形式
// 本质：React.createElement()的返回值

// let box = (
//     <div>
//         <h1>hola jsx</h1>
//     </div>
// )

// // D、A必须大写 表示组件   否则为普通函数
// 组件
// function DemoA() {
//     // 组件返回jsx元素
//     return box
// }
// 函数
// function demob(){
//     return (
//         <div>函数</div>
//     )
// }


// export default DemoA

// // ------转换成React.createElement写法 -------

// import React from "react";

// function DemoA() {
//     return React.createElement(
//         'div',
//         {},
//         [
//             React.createElement('h1', { key: 1 }, ['hola jsx'])
//         ]
//     )
// }

// export default DemoA

// —————————————————————————————————————————————————————————————————————————
// import React from "react";

// let box = (
//     <div className="box" title="hh">
//         <span>span       </span>
//         <a href="http://baidu.com">baidu</a>
//     </div>
// )
// function DemoA() {
//     return box
// }

// ------ 转换成React.createElement写法 -------

// function DemoA() {
//     return React.createElement(
//         'div',
//         { className: 'box', title: 'hh' },
//         [
//             React.createElement('span', { key: 1 }, 'span'),
//             React.createElement('a', { href: 'http://baidu.com', key: 2 }, 'baidu')
//         ]
//     )
// }

// export default DemoA

// —————————————————————————————————————————————————————————————————————————
// jsx本质是一个不可变对象，即不能对这个对象中的属性直接进行操作，只能使用
// 嵌套表达式必须用{}包起来  任何有值的内容都是表达式

// import React from "react";

// let a=110

// function foo(user) {
//     return `${user.firstName} ${user.lastName}`
// }

// function DemoA() {
//     return (
//         <div>
//             <h1>{a+110}</h1>
//             {/* 字符串拼接  110是字符串 */}
//             <h1>{`${a}+110`}</h1>
//             <h3>{foo({firstName:'wang',lastName:'cai'})}</h3>
//         </div>
//     )
// }

// export default DemoA

// —————————————————————————————————————————————————————————————————————————
// jsx可以做函数入参、返回值，还可用在if、for中

// import React from "react";

// function foo(arg) {
//     if (arg) {
//         return <div>{arg}</div>
//     } else {
//         return <div>默认值</div>
//     }
// }

// let ele = <strong>strong</strong>

// function DemoA() {
//     return (
//         <div>
//             <h1>{foo(110)}</h1>
//             <h1>{foo()}</h1>
//             <h1>{foo('hola')}</h1>
//             <h1>{foo(ele)}</h1>
//             <h1>{foo(<span>span</span>)}</h1>
//         </div>
//     )
// }

// export default DemoA

// —————————————————————————————————————————————————————————————————————————
// jsx新增3属性
// key --- 列表渲染
// ref --- 便于dom操作
// dangerouslySetInnerHTML --- 渲染一片HTML字符串

// import React from "react";

// let ele = '<div><a href="http://baidu.com">baidu</a></div>'

// function DemoA() {
//     return (
//         <div>
//             {ele}
//             <hr />
//             <div dangerouslySetInnerHTML={{ __html: ele }}></div>
//         </div>
//     )
// }

// export default DemoA

// —————————————————————————————————————————————————————————————————————————
// jsx只能有一个根标签
// 组件、任何标签都可以使用单标签
// 行内样式必须是对象形式
// class变为className

// import React from "react";

// let a=box1

// function DemoA() {
//     return (
//         <div>
//             <div style={{key1:'value1',key2:'value2',...}}>div</div>
//             <div className={a}>div</div>
//             <div className='box' className='box2'>div</div>
//         </div>
//     )
// }

// // 根标签还可以这样写
// function DemoA() {
//     return (
//         <>
//             <div>div</div>
//             <div>div</div>
//             <div>div</div>
//         </>
//     )
// }

// export default DemoA

// —————————————————————————————————————————————————————————————————————————
// jsx支持点语法

// import React from "react";

// function DemoA() {
//     return (
//         <React.Fragment>
//             <div>div</div>
//         </React.Fragment>
//     )
// }

// export default DemoA

// —————————————————————————————————————————————————————————————————————————

// import React from "react";
// const XX={
//     Button(){
//         return (<button>点我</button>)
//     },
//     Form(){
//         return(<div>form</div>)
//     }
// }

// function DemoA() {
//     // 解构写法
//     let {Button,Form}=XX
//     return (
//         <div>
//             <Button></Button>
//             <Form></Form>
//             {/* <XX.Button></XX.Button>
//             <XX.Form></XX.Form> */}
//         </div>
//     )
// }

// export default DemoA

// —————————————————————————————————————————————————————————————————————————
// 对组件来说，props---自定义属性
// 对HTML标签来说，props---标签属性
// props只能使用，不能修改

// import React from "react";

// function Child(props) {
//     let { name, age, address, ...other } = props
//     return (
//         <div>
//             {name}:{age}:{address}
//         </div>
//     )
// }

// function DemoA() {
//     let data = {
//         name: 'tom',
//         age: 10,
//         address: 'shanghai',
//         list: ['a', 'b', 'c'],
//         info: { a: 1, b: 2 },
//         fn: () => { console.log('fn...') },
//         header: (<div>header</div>),
//         id: Symbol(1),
//     }
//     return (
//         <div>
//             {/* <Child name={data.name} age={data.age} address={data.address} ></Child> */}
//             {/* 如果名字相同，可简写 */}
//             <Child {...data}></Child>
//         </div>
//     )
// }

// export default DemoA

// —————————————————————————————————————————————————————————————————————————
// 双标签之间内容是通过props.children来接收，可以是任何类型的数据 

// import React from "react";

// function Child(props) {
//     console.log(props);
//     return (
//         <div>子组件</div>
//     )
// }

// function DemoA() {
//     return (
//         <div>
//             <Child>hola</Child>
//             <Child>{true}</Child>
//             <Child><div>Hola</div><span>jsx</span></Child>
//             <Child>{() => { return 110 }}</Child>
//             <Child>{() => { return (<div>220</div>) }}</Child>
//             <Child>{() => { (<div>220</div>) }}</Child>
//         </div>
//     )
// }

// export default DemoA

// —————————————————————————————————————————————————————————————————————————
// import React from "react";

// function Child(props) {
//     let { children } = props
//     let res = null
//     if (typeof children === 'function') {
//         res = children()
//     } else {
//         res = children
//     }

//     return (
//         <div>{res}</div>
//     )
// }

// function DemoA() {
//     // 类似于vue的插槽
//     return (
//         <div>
//             <Child><div>hola jsx</div></Child>
//             <Child>{() => { (<div>220</div>) }}</Child>
//         </div>
//     )
// }

// export default DemoA

// —————————————————————————————————————————————————————————————————————————
// 如果是数组，可以直接渲染
// 如果数组中有布尔值、null、undefined，会直接被忽略，不会生成对应的文本节点

import React from "react";

function DemoA() {
    return (
        <div>
            <div>
                {
                    [
                        'a',
                        true,
                        null,
                        110,
                        undefined,
                        ['bb'],
                        (<div key='1'>div</div>)
                    ]
                }
            </div>
        </div>
    )
}

export default DemoA



